<template>
	<!-- 忘记密码 -->
	<el-dialog v-model="state.forgetPasswordDialog" title="忘记密码" width="400px">
		<el-form class="login-form" :label-position="labelPosition">
			<el-form-item label="输入您的注册账号" prop="account">
				<el-input v-model="forgetData.account" placeholder="输入您的注册账号"/>
			</el-form-item>
			<el-form-item label="输入您的个人邮箱" prop="email">
				<el-input v-model="forgetData.email" placeholder="输入您的个人邮箱"/>
			</el-form-item>
		</el-form>
		<!-- 底部内容 -->
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="state.forgetPasswordDialog = false">取消</el-button>
				<el-button type="primary" @click="verifyAccount">
					重置
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { reactive, ref } from 'vue'
	import { reset } from '@/api/login'
	import { ElMessage } from 'element-plus'
  import type { FormProps } from 'element-plus'
	// 表单对齐方式
	const labelPosition = ref<FormProps['labelPosition']>('top')
	// 表单对象接口
	interface Forget {
		account : number|null;
		email : string;
	}
	// 表单对象
	const forgetData : Forget = reactive({
		account: null,
		email: '',
	})
	// 表单规则
	const rules = reactive({
		account: [
			{ required: true, message: '请输入您的注册账号', trigger: 'blur' },
		],
		email: [
			{ required: true, type: 'email', message: '请输入您的注册邮箱', trigger: ['change'] },
		],
	})
	// 控制弹窗 默认关闭
	const state = reactive({
		forgetPasswordDialog: false,
	})

	// 打开验证邮箱和账号的弹窗
	const verifyAccount = async () => {
		const res = await reset(forgetData) as any
		if(res.status == 0){
			ElMessage({
				message: res.message,
				type: 'success',
			})
			// localStorage.setItem 存放到浏览器的本地存储空间
			// sessionStorage.setItem 存放到浏览器的会话存储空间
			localStorage.setItem('id',res.id)
			state.forgetPasswordDialog = false
		}else{
			ElMessage.error(res.message || '验证失败')
		}
	}
	// 打开弹窗
	const open = () => {
		state.forgetPasswordDialog = true
	}

	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
</style>
